<template>
    <view class="container">
        <view v-if="isFirstChange" class="first-tip">首次登录需要修改密码</view>
        <view class="step-content">
            <view class="form-group">
                <text class="label">原密码</text>
                <uni-easyinput
                    v-model="oldPassword"
                    type="password"
                    placeholder="请输入原密码"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="form-group">
                <text class="label">新密码</text>
                <uni-easyinput
                    v-model="newPassword"
                    type="password"
                    placeholder="请输入新密码（至少6位）"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="form-group">
                <text class="label">确认新密码</text>
                <uni-easyinput
                    v-model="confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="btn-container">
                <button class="confirm-btn" @click="onSubmit">
                    <text class="btn-text">确认修改</text>
                    <text class="btn-icon">✓</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { updateUserPwd } from '@/api/user.js'

const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const isFirstChange = ref(false)

// 通过入参识别是否首次登录改密（用于隐藏返回键并提示）
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1] || {}
// @ts-ignore
const options = (currentPage && currentPage.options) || {}
isFirstChange.value = options?.from === 'first'

const validate = () => {
    if (!oldPassword.value) {
        uni.showToast({ title: '请输入原密码', icon: 'none' })
        return false
    }
    if (!newPassword.value) {
        uni.showToast({ title: '请输入新密码', icon: 'none' })
        return false
    }
    if (newPassword.value.length < 6) {
        uni.showToast({ title: '密码长度不能少于6位', icon: 'none' })
        return false
    }
    if (newPassword.value.length > 20) {
        uni.showToast({ title: '密码长度不能超过20位', icon: 'none' })
        return false
    }
    if (!confirmPassword.value) {
        uni.showToast({ title: '请确认新密码', icon: 'none' })
        return false
    }
    if (newPassword.value !== confirmPassword.value) {
        uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' })
        return false
    }
    if (oldPassword.value === newPassword.value) {
        uni.showToast({ title: '新密码不能与原密码相同', icon: 'none' })
        return false
    }
    return true
}

const onSubmit = async () => {
    if (!validate()) return
    try {
        uni.showLoading({ title: '提交中...' })
        const res = await updateUserPwd(oldPassword.value, newPassword.value)
        console.log(res);
        uni.hideLoading()
        if (res?.code === 200) {
            uni.showToast({ title: '密码修改成功', icon: 'success' })
            setTimeout(() => {
                if (isFirstChange.value) {
                    uni.reLaunch({ url: '/pages/index/index' })
                } else {
                    uni.navigateBack()
                }
            }, 900)
        } else {
            // 显示服务器返回的具体错误信息
            uni.showToast({ title: res?.msg || '修改失败', icon: 'none', duration: 3000 })
        }
    } catch (e) {
        uni.hideLoading()
        console.error('请求异常:', e)
        uni.showToast({ title: '网络异常，请重试', icon: 'none' })
    }
}
</script>

<style>
.container {
    min-height: 100vh;
    background-color: #fff;
}

.first-tip {
    padding: 16rpx 20rpx;
    color: #d48806;
    background: #fffbe6;
    border: 1rpx solid #ffe58f;
    border-left: 6rpx solid #faad14;
    margin: 0 20rpx 20rpx;
    border-radius: 8rpx;
}

.step-content {
    padding: 20rpx 20rpx;
}

.form-group {
    margin-bottom: 40rpx;
}

.label {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.password-input {
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    background-color: #fafafa;
}

.password-input :deep(.uni-easyinput__content) {
    background-color: transparent;
    border: none;
}

.password-input :deep(.uni-easyinput__content-input) {
    padding: 24rpx 20rpx;
    font-size: 28rpx;
}

.btn-container {
    margin-top: 60rpx;
}

.confirm-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text { margin-right: 10rpx; }
.btn-icon { font-size: 24rpx; color: #fff; margin-left: 8rpx; }
</style> 